<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动</title>
		<style type="text/css">
			.box {
				width: 200px;
				height: 200px;
				border: 1px red solid;
				font-size: 32px;
				/*字体大小*/
				text-align: center;
				/*浮动float:left(左浮动)/right(右浮动)/none(没有,默认值,不浮动)*/
				float: left;
			}

			.box2 {
				width: 800px;
				height: 210px;
				border: 1px solid black;
			}

			.clear {
				clear: both;
			}

			.bigbox {
				overflow: hidden;
				/*超出部分隐藏*/
			}

			/*清除浮动的第三种方式:添加after伪元素。代表企业网易，淘宝等。*/
			.clearfix::after {
				/*在clearfix类的后面*/
				content: "";
				/*内容为空*/
				display: block;
				/*将伪元素转换为块级盒子*/
				height: 0;
				/*设置高度为0*/
				clear: both;
				/*清除两端浮动*/
				visibility: hidden;
				/*显示状态：隐藏*/
			}

			/* 清除浮动的第四种方式:添加双伪元素；*/
			.clearfix::after,
			.clearfix::before {
				/*在clearfix类前后添加*/
				content: "";
				display: table;
			}

			.clearfix::after {
				clear: both;
				/*清除两端浮动*/
			}
		</style>
	</head>
	<body>
		<!-- 传统网页布局:标准流+浮动+定位 -->
		<!-- 浮动:float -->
		<!-- 快速创建标签：p*3>tab -->
		<!-- 快速创建类名为box的盒子：标签.box* 个数>tab -->
		<!--  
		浮动的特性：
		1：浮动的元素会脱离标准流 (脱标)；  解决方法：清除浮动。
	    2：浮动的元素一行内显示并且顶部对齐;
		3:浮动元素具有行内块元素类似的特性。
		清除浮动的方法:
		1:额外标签法:隔墙法。即给浮动盒子后添加一个额外的块级标签，
		           并给标签加入clear：both;(清除两端浮动)。此方法不用。
		2:给父级元素添加overflow:hidden属性。
		3:父级元素添加after （在--之后）伪元素
		4:父级添加双伪元素
		  -->
		<!-- 网页布局第一准则：多个块级元素纵向排序找标准流，多个标准流横向排序找浮动。
		       标准流+浮动布局策略：父级用标准流列上下位置，内部子元素用浮动排列左右位置-->
		<div class="bigbox clearfix"> 
			<div class="box">1</div>
			<div class="box" style="height:180px;">2</div>
			<div class="box" style="height:240px;">3</div>
			<!--<div class="clear"></div>-->
			</div>
				<div class="box2"></div>
	</body>
</html>